<template>
  <div class="TabBar">
    <ul>
      <li v-for="(item,index) in dataList" :key="index" class="list">
        <div @click="tabBar(item.path, item.name, item.type)">
          <span class="icon" :class="{'icon-home':item.type===1,'icon-my':item.type===2, 'active': $route.name === item.name}"></span>
          <span class="name" :class="{active: $route.name === item.name}">{{item.textName}}</span>
        </div>
      </li>
    </ul>
    <div class="rob" @click="startGrab"></div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'TabBar',
  data() {
    return {
      isActive: 1,
      dataList: [{
        path: '/home',
        name: 'home',
        className: 'icon-home',
        type: 1,
        textName: '首页'
      }, {
        path: '/my',
        name: 'my',
        className: 'icon-my',
        type: 2,
        textName: '我的'
      }]
    };
  },
  computed: {
    ...mapGetters([
      'settingInfo'
    ]),
    finishSetting: {
      get() {
        return this.settingInfo.isSetPayPass && this.settingInfo.reserveFund > 0 && this.settingInfo.isSetCollection;
      }
    }
  },
  mounted() {

  },
  methods: {
    // 立刻抢单
    startGrab() {
      if (!this.finishSetting) {
        this.$toast('请完成抢单设置!');
        this.$router.push({ path: '/setup/graba' });
        return;
      }
      this.$router.push({ path: '/grabsheet' });
    },
    tabBar(url, name, type) {
      this.$router.push({ 'path': url });
    }
  }
};
</script>
<style scoped lang="less">
.right-pos{
  position: absolute;
  right: 0;
  top:10px;
}
.TabBar{
  position: fixed;
  bottom:0;
  left:0;
  right:0;
  z-index: 999;
  background-color: #fff;
  transform: translateZ(0);
  box-shadow: 0 0 30px 0 rgba(0,0,0,0.06);
  ul{
    display: flex;
    padding: 10px 0 12px;
    li{
      flex: 1;
      text-align: center;
      background-color: #fff;
      margin-left: 120px;
      .icon{
        width: 48px;
        height: 48px;
        background-position: center center;
        background-repeat: no-repeat;
        display: inline-block;
        background-size: contain
      }
      // .icon.icon-home{
      //   background-image: url('../assets/images/icon-home.png')
      // }
      // .icon.icon-home.active{
      //   background-image: url('../assets/images/icon-home-active.png')
      // }
      // .icon.icon-my{
      //   background-image: url('../assets/images/icon-my.png')
      // }
      // .icon.icon-my.active{
      //   background-image: url('../assets/images/icon-my-active.png')
      // }
      .name{
        font-size:20px;
        display: block;
        line-height: 20px;
        color: #b1b1b1;
      }
      .name.active{
        color:#E31D1A;
      }
    }
    li:first-child{
      margin-left: 0px;
    }
  }
  .rob{
      width:118px;
      height: 118px;
      display: block;

      // background-image: url('../assets/images/icon-rob.png');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      left: 50%;
      top:-34px;
      margin-left: -58px;
    }
}
</style>
